<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接口管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/css/element-ui.css">
    <link rel="stylesheet" href="static/css/index.css">
    <script src="static/js/vue.js"></script>
    <!-- 引入element-ui js-->
    <script src="static/js/element-ui.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script src="static/js/lodash.min.js"></script>
    <script src="static/js/config.js"></script>

    <style>
        html, body, .interfa {
            height: 99%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
<div id="app" class="interfa" style="display: flex;flex-direction: column">

    <div class="topFlexStartDiv">

        <div class="flexLeftDivInput">
            接口名称:
            <el-input v-model="apiInfoDto.name" placeholder="" @input="getInterfacePage"></el-input>
        </div>

        <div class="flexLeftDivInput">
            接口url:
            <el-input v-model="apiInfoDto.url" placeholder="" @input="getInterfacePage"></el-input>
        </div>

        <div class="inputQuery">
            <template>
                请求类型:
                <el-select v-model="methodTypeValue" clearable placeholder="请选择" @change="getInterfacePage">
                    <el-option
                            v-for="item in methodOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>

        <div class="inputQuery">
            <template>
                数据源类型:
                <el-select v-model="datasourceTypeValue" clearable placeholder="请选择" @change="getInterfacePage">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>

        <div class="inputQuery">
            <template>
                返回数据类型:
                <el-select v-model="resultTypeValue" clearable placeholder="请选择" @change="getInterfacePage">
                    <el-option
                            v-for="item in resultTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>

        <div class="inputQuery">
            <template>
                是否导出接口:
                <el-select v-model="exportTypeValue" clearable placeholder="请选择" @change="getInterfacePage">
                    <el-option
                            v-for="item in exportOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>

        <div class="inputQuery">
            <el-button type="primary" @click="addInterface">新增</el-button>
        </div>

        <div class="inputQuery">
            <el-button type="success" @click="getInterfacePage">查询</el-button>
        </div>

    </div>

    <div class="topTabDiv">
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="name"
                        label="接口名称"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="method"
                        label="请求类型"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="url"
                        label="请求url"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="operateType"
                        label="接口类型"
                        width="200">

                    <template slot-scope="scope">
                        {{operateTypeOptionsMap[scope.row.operateType]}}
                    </template>

                </el-table-column>
                <el-table-column
                        prop="resultType"
                        label="返回数据类型"
                        width="200">

                    <template slot-scope="scope">
                        {{resultTypeOptionsMap[scope.row.resultType]}}
                    </template>

                </el-table-column>
                <el-table-column
                        prop="isExport"
                        label="是否导出接口"
                        width="200">

                    <template slot-scope="scope">
                        {{exportOptionsMap[scope.row.isExport]}}
                    </template>

                </el-table-column>
                <el-table-column
                        prop="datasourceType"
                        label="数据源类型"
                        width="200">

                    <template slot-scope="scope">
                        {{optionsMap[scope.row.datasourceType]}}
                    </template>

                </el-table-column>
                <el-table-column
                        prop="datasourceCode"
                        label="数据源code"
                        width="300">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button @click="detailClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button @click="transferInterface(scope.row)" type="text" size="small">调用</el-button>
                        <el-button @click="updateInterface(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="deleteInterface(scope.row)" type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

    </div>

    <el-dialog title="接口详情" :visible.sync="detailFormVisible" @close="cleardetailForm">
        <div>
            请求参数
            <div class="marginTop10px">
                <el-table :data="detailForm.params">
                    <el-table-column property="paramName" label="参数名称" width="150"></el-table-column>
                    <el-table-column property="paramType" label="参数类型" width="150"></el-table-column>
                    <el-table-column property="conditionType" label="条件类型" width="150">
                        <template slot-scope="scope">
                            {{conditionTypeOptionsMap[scope.row.conditionType]}}
                        </template>
                    </el-table-column>
                    <el-table-column property="isRequired" label="是否必须" width="150">
                        <template slot-scope="scope">
                            {{requiredOptionsMap[scope.row.isRequired]}}
                        </template>
                    </el-table-column>
                    <el-table-column property="paramBodyType" label="传参类型" width="150">
                        <template slot-scope="scope">
                            {{paramBodyTypeOptionsMap[scope.row.paramBodyType]}}
                        </template>
                    </el-table-column>
                    <el-table-column property="paramTableFieldName" label="数据库字段" width="300">
                    </el-table-column>
                </el-table>
            </div>

        </div>

        <div v-if="detailForm.operateType == 0">
            返回结果
            <div class="marginTop10px">
                <el-table :data="detailForm.results">
                    <el-table-column property="resultName" label="字段名称" width="150"></el-table-column>
                    <el-table-column property="resultType" label="字段类型" width="150"></el-table-column>
                    <el-table-column property="sortType" label="排序类型" width="150">
                        <template slot-scope="scope">
                            {{sortTypeOptionsMap[scope.row.sortType]}}
                        </template>
                    </el-table-column>
                    <el-table-column property="exportName" label="导出列名称" width="150"></el-table-column>
                    <el-table-column property="resultTableFieldName" label="数据库字段" width="300"></el-table-column>
                </el-table>
            </div>

        </div>

        <div>
            数据源信息
            <div class="marginTop10px">
                <el-table :data="detailForm.datasourceDto">
                    <el-table-column property="datasourceName" label="数据源名称" width="150"></el-table-column>
                    <el-table-column property="datasourceCode" label="数据源code" width="150"></el-table-column>
                    <el-table-column property="ip" label="数据源ip" width="150"></el-table-column>
                    <el-table-column property="port" label="数据源port" width="150"></el-table-column>
                    <el-table-column property="databaseName" label="数据库" width="150"></el-table-column>
                    <el-table-column property="tableName" label="表名" width="150"></el-table-column>
                </el-table>
            </div>

        </div>

        <div v-if="detailForm.operateType == 0 && detailForm.isCustomizeSql != 1">
            关联关系
            <div class="marginTop10px">
                <el-table :data="detailForm.tableRelations">
                    <el-table-column property="mainTableName" label="主表名称" width="150"></el-table-column>
                    <el-table-column property="associationTableName" label="关联表名称" width="150"></el-table-column>
                    <el-table-column property="relationType" label="关联类型" width="150">
                        <template slot-scope="scope">
                            {{relationTypeOptionsMap[scope.row.relationType]}}
                        </template>
                    </el-table-column>
                    <el-table-column property="associationCondition" label="关联条件" width="600"></el-table-column>
                </el-table>
            </div>
        </div>

        <div v-if=" detailForm.isCustomizeSql == 1" >
            自定义sql
            <div class="marginTop10px">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 5, maxRows: 15}"
                        maxlength="1000"
                        show-word-limit
                        v-model="detailForm.apiCustomizeSqlDto.customizeSql">
                </el-input>
            </div>
        </div>

    </el-dialog>

    <el-dialog :title="operateType+'接口'" :visible.sync="addInterfaceFormVisible" @close="clearAddInterfaceDialog"
               width="75%">
        <div>
            <b>接口信息</b>
        </div>

        <div class="flexLeftDivInput">
            <div style="margin-left: 30px">
                接口名称:
                <el-input v-model="addApiInfoDetailDto.name" placeholder=""></el-input>
            </div>

            <div style="margin-left: 50px">
                请求url:
                <el-input v-model="addApiInfoDetailDto.url" placeholder=""></el-input>
            </div>

            <div style="margin-left: 50px">
                <template>
                    请求类型:
                    <el-select v-model="addApiInfoDetailDto.method" clearable placeholder="请选择">
                        <el-option
                                v-for="item in methodOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </div>
        </div>

        <div class="flexLeftDivInput">
            <div style="margin-left: 30px; margin-top: 10px;">
                <template>
                    接口类型:
                    <el-select v-model="addApiInfoDetailDto.operateType" clearable placeholder="请选择">
                        <el-option
                                v-for="item in operateTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </div>

            <div style="margin-left: 12px; margin-top: 10px;"
                 v-if="addApiInfoDetailDto.operateType == 0">
                <template>
                    返回数据类型:
                    <el-select v-model="addApiInfoDetailDto.resultType" clearable placeholder="请选择">
                        <el-option
                                v-for="item in resultTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </div>

            <div style="margin-left: 22px; margin-top: 10px;"
                 v-if="addApiInfoDetailDto.operateType == 0">
                <template>
                    是否导出接口:
                    <el-select v-model="addApiInfoDetailDto.isExport" clearable placeholder="请选择">
                        <el-option
                                v-for="item in exportOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </div>
        </div>

        <div class="flexLeftDivInput">
            <div style="margin-left: 26px; margin-top: 10px;">
                <template>
                    自定义sql:
                    <el-select v-model="addApiInfoDetailDto.isCustomizeSql" clearable placeholder="请选择">
                        <el-option
                                v-for="item in customizeSqlOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </div>
        </div>


        <div class="marginTop10px">
            <b>数据源和表选择</b>
        </div>

        <div class="flexLeftDivInput">
            <div class="marginLeft40px">
                <template>
                    数据源:
                    <el-select v-model="addApiInfoDetailDto.datasourceDto.datasourceCode" placeholder="请选择类型"
                               @change="datasourceChange()">
                        <el-option
                                v-for="item in apiDatasources"
                                :key="item.datasourceCode"
                                :label="item.datasourceName"
                                :value="item.datasourceCode"
                                :type="item.type">
                        </el-option>
                    </el-select>
                </template>
            </div>

            <div style="margin-left: 57px" v-if="apiDatasourcesType == 1">
                <template>
                    数据库:
                    <el-select v-model="addApiInfoDetailDto.databaseName" filterable placeholder="请选择类型"
                               @change="dataBaseChange">
                        <el-option
                                v-for="item in databases"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </template>
            </div>

            <div style="margin-left: 92px" v-if="addApiInfoDetailDto.isCustomizeSql != 1">
                <template>
                    表:
                    <el-select v-model="addApiInfoDetailDto.mainTableName" filterable placeholder="请选择类型"
                               @change="tableChange">
                        <el-option
                                v-for="item in tableOptions"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </template>
            </div>
        </div>

        <div v-if="addApiInfoDetailDto.operateType == 0 && apiDatasourcesType == 1 && addApiInfoDetailDto.isCustomizeSql != 1 ">
            <b>关联表选择</b>
        </div>

        <div>
            <div class="flexLeft100DivInput" v-if="addApiInfoDetailDto.operateType == 0 &&
                                apiDatasourcesType == 1 && addApiInfoDetailDto.isCustomizeSql != 1" >
                添加关联表:
                <div class="flexLeftDiv">
                    <el-button @click="addTableRelation" type="primary" plain>添加</el-button>
                </div>
            </div>

            <div style="margin-left: 28px; margin-top: 10px;">
                <div v-for="(item,index) in relationTableList" :key="index"
                     style="display: flex;margin-bottom: 10px;margin-left: 10px;">
                    <div class="flexLeftDiv">
                        主表:
                        <el-select v-model="item.tableValue" filterable placeholder="请选择类型"
                                   @change="mainTableChange(index, item)">
                            <el-option
                                    v-for="item in relationTables"
                                    :key="item.tableName"
                                    :label="item.tableName"
                                    :value="item.tableName">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="flexLeftDiv" >
                        关联表:
                        <el-select v-model="item.relationTableValue" filterable placeholder="请选择类型"
                                   @change="relationTableChange(index, item)">
                            <el-option
                                    v-for="item in relationTables"
                                    :key="item.tableName"
                                    :label="item.tableName"
                                    :value="item.tableName">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="flexLeftDiv">
                        关联关系:
                        <el-select v-model="item.relationValue" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in relationTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="flexLeftDiv">
                        主表关联条件字段:
                        <el-select v-model="item.mainTableConditionFeild" filterable clearable placeholder="请选择">
                            <el-option
                                    v-for="item in item.mainTableFields"
                                    :key="item.fieldName"
                                    :label="item.fieldName"
                                    :value="item.fieldName">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="flexLeftDiv">
                        关联表条件字段:
                        <el-select v-model="item.tableConditionFeild" filterable clearable placeholder="请选择">
                            <el-option
                                    v-for="item in item.tableConditionFeilds"
                                    :key="item.fieldName"
                                    :label="item.fieldName"
                                    :value="item.fieldName">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="flexLeftDiv">
                        <el-button @click="deleteRelationTable(index, item)" type="danger" plain>删除</el-button>
                    </div>

                </div>
            </div>

        </div>

        <div v-if="addApiInfoDetailDto.isCustomizeSql == 1" >
            <b>自定义sql</b>
            <div style="margin-left: 76px;width: 53%">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 5, maxRows: 15}"
                        placeholder="请输入内容"
                        maxlength="1000"
                        show-word-limit
                        v-model="addApiInfoDetailDto.apiCustomizeSqlDto.customizeSql">
                </el-input>
            </div>
        </div>

        <div style="margin-top: 10px" v-if="addApiInfoDetailDto.isCustomizeSql != 1 ">
            <b>接口配置</b>
        </div>

        <div class="flexLeftDiv" v-if="addApiInfoDetailDto.isCustomizeSql != 1 ">
            <el-table :data="tablesFeilds" :key="keyValue">
                <el-table-column property="fieldName" label="字段名称" width="300" key="fieldName"></el-table-column>
                <!-- <el-table-column property="fieldType" label="字段类型" width="150"></el-table-column>-->

                <el-table-column property="paramName" label="参数名称" width="150" key="paramName">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.paramName" placeholder=""></el-input>
                    </template>
                </el-table-column>

                <el-table-column property="paramBodyType" label="参数类型" width="150" key="paramBodyType">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.paramBodyType" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in paramBodyTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column property="isRequired" label="必须参数" width="150" key="isRequired">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.isRequired" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in requiredOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column property="conditionType" label="条件类型" width="150"
                                 v-if="addApiInfoDetailDto.operateType != 1"
                                 key="conditionType">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.conditionType" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in conditionTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column property="isUpdate" label="是否更新参数" width="150"
                                 v-if="addApiInfoDetailDto.operateType == 2"
                                 key="isUpdate">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.isUpdate" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in requiredOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column property="resultName" label="返回字段名称" width="150"
                                 v-if="addApiInfoDetailDto.operateType == 0 " key="resultName">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.resultName" placeholder=""></el-input>
                    </template>
                </el-table-column>

                <el-table-column property="exportName" label="导出表列名称" width="150"
                                 v-if="addApiInfoDetailDto.operateType == 0" key="exportName">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.exportName" placeholder=""></el-input>
                    </template>
                </el-table-column>

                <el-table-column property="sortType" label="排序类型" width="150"
                                 v-if="addApiInfoDetailDto.operateType == 0 " key="sortType">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.sortType" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in sortTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column property="isParam" label="清空" width="120" key="isParam">
                    <template slot-scope="scope">
                        <el-button @click="onclickDelRow(scope.row,scope)" type="danger" plain>清空</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="onSubmitAddInterface" type="primary" plain>提交</el-button>
        </div>

    </el-dialog>

    <el-dialog title="调用接口" :visible.sync="transferInterfaceFormVisible" width="50%" @close="clearTransferParam">
        <div>
            url参数:
            <div class="flexLeftDivInput">
                <el-table :data="transferParam.url">
                    <el-table-column property="name" label="参数名称" width="300">
                        <template slot-scope="scope">
                            <el-input :readOnly="scope.row.readOnly" v-model="scope.row.name" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column property="value" label="参数值" width="300">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.value" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column property="value" label="参数值" width="300">
                        <template slot="header" slot-scope="scope">
                            <el-button @click="addUrlParam" type="primary">添加</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button v-if="!scope.row.readOnly" type="danger"
                                       @click="deleteUrlParam(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div>
            body参数:
            <div class="flexLeftDivInput">
                <el-table :data="transferParam.body">
                    <el-table-column property="name" label="参数名称" width="300">
                        <template slot-scope="scope">
                            <el-input :readOnly="scope.row.readOnly" v-model="scope.row.name" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column property="value" label="参数值" width="300">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.value" placeholder=""></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column property="value" label="参数值" width="300">
                        <template slot="header" slot-scope="scope">
                            <el-button @click="addBodyParam" type="primary">添加</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button v-if="!scope.row.readOnly" type="danger"
                                       @click="deleteBodyParam(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="transferInterfaceInvoke" type="success" plain>调用</el-button>
        </div>

        <div>
            调用结果：
            <div class="flexLeftDivInput">
                <el-table :data="transferParam.result" :key="keyValue">
                    <el-table-column property="value" label="返回结果"></el-table-column>
                </el-table>
            </div>
        </div>
    </el-dialog>

    <div class="block" style="text-align: right">
        <span class="demonstration"></span>
        <el-pagination
                background
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        >
        </el-pagination>
    </div>

</div>


</body>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                curentItem: {},
                paramName: '',
                paramBodyType: '',
                isRequired: '',
                conditionType: '',
                resultName: '',
                exportName: '',
                sortType: '',
                operateType: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: [{
                    name: '',
                    method: '',
                    url: '',
                    operateType: '',
                    resultType: '',
                    isExport: '',
                    datasourceType: '',
                    datasourceCode: ''
                }],
                apiInfoDto: {
                    name: '',
                    method: '',
                    url: '',
                    operateType: '',
                    resultType: '',
                    isExport: '',
                    datasourceType: '',
                    datasourceCode: ''
                },
                options: [],
                methodOptions: [
                    {
                        value: 'GET',
                        label: 'GET'
                    },
                    {
                        value: 'POST',
                        label: 'POST'
                    },
                    {
                        value: 'PUT',
                        label: 'PUT'
                    },
                    {
                        value: 'DELETE',
                        label: 'DELETE'
                    }
                ],
                exportOptions: [
                    {
                        value: 1,
                        label: '是'
                    },
                    {
                        value: 0,
                        label: '否'
                    }
                ],
                requiredOptions: [
                    {
                        value: 1,
                        label: '是'
                    },
                    {
                        value: 0,
                        label: '否'
                    }
                ],
                customizeSqlOptions:[
                    {
                        value: 1,
                        label: '是'
                    },
                    {
                        value: 0,
                        label: '否'
                    }
                ],
                paramBodyTypeOptions: [
                    {
                        value: 0,
                        label: 'url传参'
                    },
                    {
                        value: 1,
                        label: 'body传参'
                    }
                ],
                sortTypeOptions: [
                    {
                        value: 0,
                        label: '无排序'
                    },
                    {
                        value: 1,
                        label: '倒序'
                    },
                    {
                        value: 2,
                        label: '升序'
                    }
                ],
                resultTypeOptions: [],
                operateTypeOptions: [],
                conditionTypeOptions: [],
                relationTypeOptions: [],
                datasourceTypeValue: '',
                methodTypeValue: '',
                resultTypeValue: '',
                exportTypeValue: '',
                datasourceForm: {},
                datasourceFormVisible: false,
                datasourceFormRules: {},
                datasourceOptions: [
                    {
                        value: ''
                    }
                ],
                formLabelWidth: '160px',
                detailFormVisible: false,
                detailForm: {
                    params: {},
                    apiCustomizeSqlDto: {
                        customizeSql: ''
                    }
                },
                addInterfaceFormVisible: false,
                apiDatasources: [],
                apiDatasourcesType: '',
                databases: [],
                addApiInfoDetailDto: {
                    id: '',
                    name: '',
                    url: '',
                    method: '',
                    operateType: '',
                    resultType: '',
                    isExport: 0,
                    isCustomizeSql: 0,
                    apiCustomizeSqlDto:{
                        customizeSql:''
                    },
                    datasourceDto: {
                        type: ''
                    },
                    params: {}
                },
                tableOptions: [],
                tablesFeilds: [],
                mainTableFields: [],
                keyValue: 0,
                showEdit: [],
                transferInterfaceFormVisible: false,
                transferParam: {
                    isExport: '',
                    method: '',
                    requestUrl: '',
                    resultType: '',
                    url: [
                        {
                            readOnly: '',
                            name: '',
                            value: ''
                        }
                    ],
                    body: [
                        {
                            name: '',
                            value: ''
                        }
                    ]
                },
                relationTables: [],
                relationTableList: [],
                cacheTableFields: {}
            }
        },
        computed: {
            optionsMap() {
                return this.options.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            },
            resultTypeOptionsMap() {
                return this.resultTypeOptions.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            },
            operateTypeOptionsMap() {
                return this.operateTypeOptions.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            },
            exportOptionsMap() {
                return this.exportOptions.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            },
            conditionTypeOptionsMap() {
                return this.conditionTypeOptions.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            },
            requiredOptionsMap() {
                return this.requiredOptions.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            },
            paramBodyTypeOptionsMap() {
                return this.paramBodyTypeOptions.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            },
            sortTypeOptionsMap() {
                return this.sortTypeOptions.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            },
            relationTypeOptionsMap() {
                return this.relationTypeOptions.reduce((prev, item) => {
                    prev[item.value] = item.label
                    return prev
                }, {})
            }
        },
        methods: {
            async getInterfacePage() {
                this.apiInfoDto.page = this.currentPage;
                this.apiInfoDto.size = this.pageSize;
                this.apiInfoDto.datasourceType = this.datasourceTypeValue;
                this.apiInfoDto.method = this.methodTypeValue;
                this.apiInfoDto.resultType = this.resultTypeValue;
                this.apiInfoDto.isExport = this.exportTypeValue;
                const result = await axios.post(BASE_URL + '/api/info/page', this.apiInfoDto);
                if (result.data.code == 0) {
                    this.tableData = result.data.data.content;
                    this.total = result.data.data.total;
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async getDatasourceTypeList() {
                const result = await axios.get(BASE_URL + '/api/enum/datasource');
                if (result.data.code == 0) {
                    let options = this.options;
                    let data = result.data.data;
                    data.forEach(function (item) {
                        let option = {};
                        option.value = item.type;
                        option.label = item.name;
                        options.push(option);
                    });
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async getResutTypeList() {
                const result = await axios.get(BASE_URL + '/api/enum/result-type');
                if (_.get(result, 'data.code', null) == 0) {
                    let options = this.resultTypeOptions;
                    let data = result.data.data;
                    data.forEach(function (item) {
                        let option = {};
                        option.value = item.type;
                        option.label = item.name;
                        options.push(option);
                    });
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async getOperateTypeList() {
                const result = await axios.get(BASE_URL + '/api/enum/operate-type');
                if (result.data.code == 0) {
                    let options = this.operateTypeOptions;
                    let data = result.data.data;
                    data.forEach(function (item) {
                        let option = {};
                        option.value = item.type;
                        option.label = item.name;
                        options.push(option);
                    });
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async getConditionTypeList() {
                const result = await axios.get(BASE_URL + '/api/enum/condition');
                if (result.data.code == 0) {
                    let options = this.conditionTypeOptions;
                    let data = result.data.data;
                    data.forEach(function (item) {
                        let option = {};
                        option.value = item.type;
                        option.label = item.name;
                        options.push(option);
                    });
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async getRelationTypeList() {
                const result = await axios.get(BASE_URL + '/api/enum/relation');
                if (result.data.code == 0) {
                    let options = this.relationTypeOptions;
                    let data = result.data.data;
                    data.forEach(function (item) {
                        let option = {};
                        option.value = item.type;
                        option.label = item.name;
                        options.push(option);
                    });
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async handleSizeChange(size) {
                this.pageSize = size;
                this.getInterfacePage();
            },
            async handleCurrentChange(page) {
                this.currentPage = page;
                this.getInterfacePage();
            },
            detailClick(row) {
                this.detailFormVisible = !this.detailFormVisible;
                let datasourceDto = [];
                let datasource = {
                    ...row.datasourceDto
                };
                datasource.databaseName = row.databaseName;
                datasource.tableName = row.mainTableName;
                datasourceDto.push(datasource);
                console.log(row);
                console.log(datasourceDto);
                this.detailForm = {...row};
                this.detailForm.datasourceDto = datasourceDto;
            },
            cleardetailForm() {
                this.detailForm = {};
            },
            async addInterface() {
                const result = await axios.get(BASE_URL + '/api/datasource/');
                if (result.data.code == 0) {
                    this.apiDatasources = result.data.data;
                    this.addInterfaceFormVisible = true;
                    this.operateType = "新增";
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async updateInterface(row) {
                const result = await axios.get(BASE_URL + '/api/datasource/');
                if (result.data.code == 0) {
                    this.apiDatasources = result.data.data;
                    this.addInterfaceFormVisible = true;
                    this.operateType = "编辑";

                    this.addApiInfoDetailDto = {
                        ...JSON.parse(JSON.stringify(row))
                    }
                    this.apiDatasourcesType = row.datasourceType;
                    row.params.forEach(item => {
                        let param = {};
                        param.fieldName = item.paramTableFieldName;
                        param.paramName = item.paramName;
                        param.paramBodyType = item.paramBodyType;
                        param.isRequired = item.isRequired;
                        param.conditionType = item.conditionType;
                        param.paramTableFieldType = item.paramTableFieldType;
                        param.resultTableFieldType = '';
                        param.fieldType = item.paramTableFieldType;
                        param.resultName = '';
                        param.exportName = '';
                        param.sortType = '';
                        param.isUpdate = '';
                        this.tablesFeilds.push(param);
                    });

                    this.relationTableList = [];
                    row.tableRelations.forEach(item => {
                        let arr = item.associationCondition.split("=");
                        let relation = {
                            "tableValue": item.mainTableName,
                            "relationTableValue": item.associationTableName,
                            "relationValue": item.relationType,
                            "mainTableConditionFeild": arr[0],
                            "tableConditionFeild": arr[1]
                        }
                        this.relationTableList.push(relation);
                    });

                    row.results.forEach(item => {
                        let hasFlag = false;
                        this.tablesFeilds.forEach(field => {
                            if (field.fieldName == item.resultTableFieldName) {
                                hasFlag = true;
                                field.resultName = item.resultName;
                                field.exportName = item.exportName;
                                field.sortType = item.sortType;
                                field.resultTableFieldType = item.resultTableFieldType;
                            }
                        })

                        if (!hasFlag) {
                            let result = {};
                            result.paramName = '';
                            result.paramBodyType = '';
                            result.isRequired = '';
                            result.conditionType = '';
                            result.isUpdate = '';
                            result.paramTableFieldType = '';
                            result.resultTableFieldType = item.resultTableFieldType;
                            result.fieldType = item.resultTableFieldType;
                            result.fieldName = item.resultTableFieldName;
                            result.resultName = item.resultName;
                            result.exportName = item.exportName;
                            result.sortType = item.sortType;
                            this.tablesFeilds.push(result);
                        }
                    });
                } else {
                    this.$message.error(result.data.message);
                }

                //获取数据源下的所有库
                this.getDatabases();

                //获取库下所有的表
                const tables = await axios.get(BASE_URL + '/api/datasource/tables?datasourceCode=' +
                    this.addApiInfoDetailDto.datasourceDto.datasourceCode + '&dataBaseName=' +
                    this.addApiInfoDetailDto.databaseName);
                if (tables.data.code == 0) {
                    this.tableOptions = tables.data.data;
                } else {
                    this.$message.error(result.data.message);
                }

            },
            async getTables() {
                this.tableOptions = [];
                this.tablesFeilds = [];
                this.relationTableList = [];
                this.addApiInfoDetailDto.mainTableName = '';
                const result = await axios.get(BASE_URL + '/api/datasource/tables?datasourceCode=' +
                    this.addApiInfoDetailDto.datasourceDto.datasourceCode + '&dataBaseName=' + this.addApiInfoDetailDto.databaseName);
                if (result.data.code == 0) {
                    this.tableOptions = result.data.data;
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async getDatabases() {
                this.databases = [];
                const result = await axios.get(BASE_URL + '/api/datasource/database?datasourceCode=' +
                    this.addApiInfoDetailDto.datasourceDto.datasourceCode);
                if (result.data.code == 0) {
                    this.databases = result.data.data;
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async datasourceChange() {
                this.addApiInfoDetailDto.databaseName = '';
                this.addApiInfoDetailDto.mainTableName = '';
                this.tablesFeilds = [];
                this.relationTableList = [];
                this.apiDatasources.forEach(item => {
                    if (item.datasourceCode == this.addApiInfoDetailDto.datasourceDto.datasourceCode) {
                        this.apiDatasourcesType = item.type;
                    }
                });
                if (this.apiDatasourcesType == 1) {
                    this.getDatabases();
                } else {
                    this.getTables();
                }
            },
            async dataBaseChange() {
                this.getTables();
            },
            async getCacheTables(datasourceCode, dataBaseName, tableName) {
                let resultFields = [];
                let key = datasourceCode + tableName;
                if (this.cacheTableFields[key] == undefined || this.cacheTableFields[key] == null) {
                    const result = await axios.get(BASE_URL + '/api/datasource/table/field?datasourceCode=' +
                        datasourceCode + '&tableName=' + tableName + '&dataBaseName=' + dataBaseName);
                    if (result.data.code == 0) {
                        result.data.data.forEach(item => {
                            item.fieldName = tableName + "." + item.fieldName;
                            item.paramName = '';
                            resultFields.push(item);
                        })
                        this.cacheTableFields[key] = resultFields;
                    } else {
                        this.$message.error(result.data.message);
                    }
                } else {
                    resultFields = [
                        ...this.cacheTableFields[key]
                    ]
                }
                return resultFields;
            },
            async getTableFields() {
                this.tablesFeilds = [];
                this.relationTableList = [];
                this.getCacheTables(this.addApiInfoDetailDto.datasourceDto.datasourceCode,
                    this.addApiInfoDetailDto.databaseName,
                    this.addApiInfoDetailDto.mainTableName).then(result => {
                    this.tablesFeilds = [...result];
                });

            },
            async tableChange() {
                this.getTableFields();
            },
            onclickDelRow(row, scope) {
                row.paramName = '';
                row.paramBodyType = '';
                row.isRequired = '';
                row.conditionType = '';
                row.resultName = '';
                row.exportName = '';
                row.sortType = '';
                row.isUpdate = '', this.keyValue = +new Date();
            },
            async addTableRelation() {
                if (null == this.addApiInfoDetailDto.mainTableName || this.addApiInfoDetailDto.mainTableName == '') {
                    this.$message.error('请先选择数据源和主表');
                    return;
                }

                let flag = false;
                this.apiDatasources.forEach(item => {
                    if (item.datasourceCode == this.addApiInfoDetailDto.datasourceDto.datasourceCode && item.type == 1) {
                        flag = true;
                    }
                })

                if (!flag) {
                    this.$message.error('目前仅Mysql支持关联查询');
                    return;
                }

                const result = await axios.get(BASE_URL + '/api/datasource/tables?datasourceCode=' +
                    this.addApiInfoDetailDto.datasourceDto.datasourceCode + '&dataBaseName=' +
                    this.addApiInfoDetailDto.databaseName);

                if (result.data.code == 0) {
                    let data = result.data.data;
                    const relationTables = []
                    data.forEach(item => {
                        let o = {
                            tableName: item
                        }
                        relationTables.push(o)
                    });
                    this.relationTables = relationTables;
                    let obj = {
                        tableValue: '',
                        relationValue: '',
                        relationTableValue: ''
                    }
                    this.relationTableList.push(obj);
                } else {
                    this.$message.error(result.data.message);
                }
            },
            async relationTableChange(index, row) {
                let tableConditionFeilds = [];
                this.relationTableList.forEach(async item => {
                    if (item.relationTableValue != '') {
                        this.getCacheTables(this.addApiInfoDetailDto.datasourceDto.datasourceCode,
                            this.addApiInfoDetailDto.databaseName,
                            item.relationTableValue).then(result => {
                            result.forEach(field => {
                                let tablesFeildFlag = false;
                                this.tablesFeilds.forEach(item => {
                                    if (item.fieldName == field.fieldName) {
                                        tablesFeildFlag = true;
                                    }
                                });
                                if (!tablesFeildFlag) {
                                    this.tablesFeilds.push(field);
                                }
                                if (row.tableValue == item.tableValue) {
                                    tableConditionFeilds.push(field);
                                }
                            });
                        });
                    }
                });
                row.tableConditionFeilds = tableConditionFeilds;
            },
            async mainTableChange(index, row) {
                this.relationTableList.forEach(async item => {
                    if (item.tableValue != '') {
                        let mainTableFields = [];
                        this.getCacheTables(this.addApiInfoDetailDto.datasourceDto.datasourceCode,
                            this.addApiInfoDetailDto.databaseName,
                            item.tableValue).then(reuslt => {
                            reuslt.forEach(field => {
                                let tablesFeildFlag = false;

                                this.tablesFeilds.forEach(item => {
                                    if (item.fieldName == field.fieldName) {
                                        tablesFeildFlag = true;
                                    }
                                });
                                if (!tablesFeildFlag) {
                                    this.tablesFeilds.push(field);
                                }

                                if (row.tableValue == item.tableValue) {
                                    mainTableFields.push(field);
                                }

                            });
                            row.mainTableFields = [
                                ...mainTableFields
                            ]
                        })
                    }
                });
            },
            async deleteRelationTable(index, row) {
                this.relationTableList.splice(index, 1);
                let newTablesFeilds = []
                let tabelSet = new Set();
                tabelSet.add(this.addApiInfoDetailDto.mainTableName);
                this.relationTableList.forEach(item => {
                    tabelSet.add(item.tableValue);
                    tabelSet.add(item.relationTableValue);
                })
                tabelSet.forEach(item => {
                    this.getCacheTables(this.addApiInfoDetailDto.datasourceDto.datasourceCode,
                        this.addApiInfoDetailDto.databaseName,
                        item).then(result => {
                        result.forEach(field => {
                            newTablesFeilds.push(field);
                        });
                    });
                })
                this.tablesFeilds = newTablesFeilds;
            },
            checkUrl(str_url) {
                var strRegex = '((^/?)+'
                    + '(/[0-9a-z_!~*\'().;?:@&=+$,%#-]+)+/?)$';
                var re = new RegExp(strRegex);
                if (re.test(str_url)) {
                    return (true);
                } else {
                    return (false);
                }
            },
            async onSubmitAddInterface() {
                if (_.isEmpty(this.addApiInfoDetailDto.url)) {
                    this.$message.warning('接口url不能为空');
                    return;
                }

                if (!this.checkUrl(this.addApiInfoDetailDto.url)) {
                    this.$message.warning('url格式不对');
                    return;
                }

                if (_.isEmpty(this.addApiInfoDetailDto.name)) {
                    this.$message.warning('接口名称不能为空');
                    return;
                }

                if (_.isEmpty(this.addApiInfoDetailDto.method)) {
                    this.$message.warning('请求类型不能为空');
                    return;
                }
                if (!_.isInteger(this.addApiInfoDetailDto.operateType)) {
                    this.$message.warning('接口类型不能为空');
                    return;
                }

                if (this.addApiInfoDetailDto.operateType == 0) {
                    if (!_.isInteger(this.addApiInfoDetailDto.resultType)) {
                        this.$message.warning('返回数据类型不能为空');
                        return;
                    }
                    if (!_.isInteger(this.addApiInfoDetailDto.isExport)) {
                        this.$message.warning('是否导出接口类型不能为空');
                        return;
                    }
                }

                let resultFlag = false;
                let exportFlag = false;
                let updateFlag = false;
                let params = [];
                let results = [];
                this.tablesFeilds.forEach(item => {
                    item.resultTableFieldName = item.fieldName;
                    item.paramTableFieldName = item.fieldName;
                    item.resultTableFieldType = item.fieldType;
                    item.paramTableFieldType = item.fieldType;

                    if (!_.isEmpty(item.exportName)) {
                        exportFlag = true;
                    }
                    if (!_.isEmpty(item.resultName)) {
                        resultFlag = true;
                    }
                    if (!_.isEmpty(item.paramName)) {
                        params.push(item);
                    }
                    if (1 == item.isUpdate) {
                        updateFlag = true;
                    }
                    if (!_.isEmpty(item.resultName)) {
                        results.push(item);
                    }
                });

                if (this.addApiInfoDetailDto.isCustomizeSql != 1 && this.addApiInfoDetailDto.operateType == 0 && !resultFlag) {
                    this.$message.warning('最少配置一列返回字段列');
                    return;
                }
                if (this.addApiInfoDetailDto.isCustomizeSql != 1 && this.addApiInfoDetailDto.isExport == 1 && !exportFlag) {
                    this.$message.warning('导出接口最少一列导出字段');
                    return;
                }
                if (this.addApiInfoDetailDto.operateType != 0 && params.length < 1) {
                    this.$message.warning('最少配置一列参数');
                    return;
                }
                if (this.addApiInfoDetailDto.operateType == 2 && !updateFlag) {
                    this.$message.warning('更新操作最新配置一项更新参数');
                    return;
                }

                this.addApiInfoDetailDto.datasourceCode = this.addApiInfoDetailDto.datasourceDto.datasourceCode;
                this.addApiInfoDetailDto.params = params;
                this.addApiInfoDetailDto.results = results;

                let tableRelations = [];
                this.relationTableList.forEach(item => {
                    let tableRelation = {};
                    tableRelation.mainTableName = item.tableValue;
                    tableRelation.associationTableName = item.relationTableValue;
                    tableRelation.relationType = item.relationValue;
                    tableRelation.associationCondition = item.mainTableConditionFeild + "=" + item.tableConditionFeild;
                    tableRelations.push(tableRelation);
                });

                this.addApiInfoDetailDto.tableRelations = tableRelations;

                const result = await axios.put(BASE_URL + '/api/info/save-or-update', this.addApiInfoDetailDto);
                if (result.data.code == 0) {
                    this.addInterfaceFormVisible = !this.addInterfaceFormVisible;
                    this.clearAddInterfaceDialog();
                    this.getInterfacePage();
                    this.$message.success('新增接口成功');
                } else {
                    this.$message.error(result.data.message);
                }
            }
            ,
            clearAddInterfaceDialog() {
                this.addApiInfoDetailDto = {};
                this.addApiInfoDetailDto.datasourceDto = {};
                this.addApiInfoDetailDto.params = {};
                this.tablesFeilds = [];
                this.relationTableList = [];
            }
            ,
            transferInterface(row) {
                this.transferInterfaceFormVisible = !this.transferInterfaceFormVisible;
                let body = [];
                let url = [];
                row.params.forEach(item => {
                    if (item.isRequired == 1) {
                        if (item.paramBodyType == 1) {
                            let bodyItem = {};
                            bodyItem.readOnly = true;
                            bodyItem.name = item.paramName;
                            body.push(bodyItem);
                        } else {
                            let urlItem = {};
                            urlItem.name = item.paramName;
                            urlItem.readOnly = true;
                            url.push(urlItem);
                        }
                    }
                });

                this.transferParam.body = body;
                this.transferParam.url = url;
                this.transferParam.requestUrl = row.url;
                this.transferParam.method = row.method;
                this.transferParam.resultType = row.resultType;
                this.transferParam.isExport = row.isExport;
            }
            ,
            async transferInterfaceInvoke() {
                let url = BASE_URL + '' + this.transferParam.requestUrl + "?";
                if (this.transferParam.url != null) {
                    for (let i = 0; i < this.transferParam.url.length; i++) {
                        if (i == 0) {
                            url = url + this.transferParam.url[i].name + '=' + this.transferParam.url[i].value;
                        } else {
                            url = url + '&' + this.transferParam.url[i].name + '=' + this.transferParam.url[i].value;
                        }
                    }
                }

                let body = {};
                if (this.transferParam.body != null) {
                    this.transferParam.body.forEach(item => {
                        body[item.name] = item.value;
                    })
                }

                if (this.transferParam.isExport == 0) {
                    let result = {};
                    if (this.transferParam.method == 'GET') {
                        result = await axios.get(url);
                    }
                    if (this.transferParam.method == 'POST') {
                        result = await axios.post(url, body);
                    }
                    if (this.transferParam.method == 'DELETE') {
                        result = await axios.delete(url, body);
                    }
                    if (this.transferParam.method == 'PUT') {
                        result = await axios.put(url, body);
                    }

                    if (result.data.code == 0) {
                        let data = [];
                        if (0 == this.transferParam.resultType) {
                            let item = {};
                            item.value = JSON.stringify(result.data.data);
                            data.push(item);
                        }
                        if (1 == this.transferParam.resultType) {
                            result.data.data.forEach(item => {
                                let dItem = {};
                                dItem.value = JSON.stringify(item);
                                data.push(dItem);
                            })
                        }
                        if (2 == this.transferParam.resultType) {
                            result.data.data.content.forEach(item => {
                                let dItem = {};
                                dItem.value = JSON.stringify(item);
                                data.push(dItem);
                            })
                        }

                        this.$set(this.transferParam, 'result', data);
                        this.keyValue = +new Date();
                    } else {
                        this.$message.error(result.data.message);
                    }
                } else {
                    if (this.transferParam.method == 'GET') {
                        await axios({
                            method: "GET",
                            url: url,
                            responseType: 'blob' //返回是个文件
                        }).then(response => {
                            this.download(response) //then直接下载，方法在下边
                        })
                    }
                    if (this.transferParam.method == 'POST') {
                        await axios({
                            method: "POST",
                            url: url,
                            data: body,
                            responseType: 'blob' //返回是个文件
                        }).then(response => {
                            this.download(response) //then直接下载，方法在下边
                        })
                    }
                    if (this.transferParam.method == 'PUT') {
                        await axios({
                            method: "PUT",
                            url: url,
                            data: body,
                            responseType: 'blob' //返回是个文件
                        }).then(response => {
                            this.download(response) //then直接下载，方法在下边
                        })
                    }
                    if (this.transferParam.method == 'DELETE') {
                        await axios({
                            method: "DELETE",
                            url: url,
                            data: body,
                            responseType: 'blob' //返回是个文件
                        }).then(response => {
                            this.download(response) //then直接下载，方法在下边
                        })
                    }
                }
            }
            ,
            download(res) {
                let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});//type是文件类，详情可以参阅blob文件类型
                // 创建新的URL并指向File对象或者Blob对象的地址
                const blobURL = window.URL.createObjectURL(blob)
                // 创建a标签，用于跳转至下载链接
                const tempLink = document.createElement('a')
                tempLink.style.display = 'none'
                tempLink.href = blobURL
                tempLink.setAttribute('download', decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]))
                // 兼容：某些浏览器不支持HTML5的download属性
                if (typeof tempLink.download === 'undefined') {
                    tempLink.setAttribute('target', '_blank')
                }
                // 挂载a标签
                document.body.appendChild(tempLink)
                tempLink.click()
                document.body.removeChild(tempLink)
                // 释放blob URL地址
                window.URL.revokeObjectURL(blobURL)
            }
            ,
            addUrlParam() {
                this.transferParam.url.push({})
            }
            ,
            deleteUrlParam(index, row) {
                this.transferParam.url.splice(index, 1);
            }
            ,
            addBodyParam() {
                this.transferParam.body.push({})
            }
            ,
            deleteBodyParam(index, row) {
                this.transferParam.body.splice(index, 1);
            }
            ,
            clearTransferParam() {
                this.transferParam.body = [];
                this.transferParam.url = [];
                this.transferParam.result = [];
            }
            ,
            async deleteInterface(row) {
                this.$confirm('此操作将删除接口, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const result = await axios.delete(BASE_URL + '/api/info/?id=' + row.id);
                    if (result.data.code == 0) {
                        this.getInterfacePage();
                    } else {
                        this.$message.error(result.data.message);
                    }
                }).catch(action => {
                });
            }
        },
        created: function () {
            this.getInterfacePage();
            this.getDatasourceTypeList();
            this.getResutTypeList();
            this.getOperateTypeList();
            this.getConditionTypeList();
            this.getRelationTypeList();
        }

    });

</script>

</html>